<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参数敏感性分析 - 林序3PG模型可视化系统</title>
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>#}

    <link href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='bootstrap/bootstrap-icons-1.11.1/bootstrap-icons.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <style>
        :root {
            --primary-color: #2E7D32;
            --secondary-color: #81C784;
            --accent-color: #DCEDC8;
            --text-color: #212121;
            --light-text: #757575;
            --border-color: #E0E0E0;
            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: #F5F5F5;
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            padding: 1.5rem;
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--secondary-color);
        }

        .project-info-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .project-title {
            font-size: 1.5rem;
            color: var(--primary-color);
            font-weight: 600;
            margin: 0;
        }

        .project-actions {
            display: flex;
            gap: 0.5rem;
        }

        .base-project-info {
            background-color: var(--accent-color);
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .info-label {
            font-weight: 500;
            color: var(--primary-color);
            margin-bottom: 0.25rem;
        }

        .info-value {
            margin-bottom: 0.75rem;
        }

        .info-section-title {
            font-size: 1.2rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .parameters-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .param-select-container {
            margin-bottom: 1.5rem;
        }

        .param-range-container {
            padding: 1rem;
            background-color: #f9f9f9;
            border-radius: 6px;
            margin-bottom: 1rem;
        }

        .slider-container {
            padding: 0 1rem;
        }

        .custom-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.5rem 1.2rem;
            border-radius: 4px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .custom-btn:hover {
            background-color: #1B5E20;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .custom-btn-outline {
            background-color: transparent;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            padding: 0.5rem 1.2rem;
            border-radius: 4px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .custom-btn-outline:hover {
            background-color: var(--accent-color);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .results-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 1.5rem;
        }

        .tab-content {
            padding: 1.5rem 0;
        }

        .nav-tabs .nav-link {
            color: var(--light-text);
            border: none;
            padding: 0.5rem 1rem;
            font-weight: 500;
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
            background-color: transparent;
        }

        .chart-container {
            height: 400px;
            background-color: #f9f9f9;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .table-responsive {
            margin-top: 1rem;
        }

        .badge-info {
            background-color: var(--secondary-color);
            color: var(--text-color);
            font-weight: normal;
            padding: 0.35rem 0.7rem;
        }

        .analysis-options {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .project-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .project-actions {
                width: 100%;
                justify-content: space-between;
            }

            .analysis-options {
                flex-direction: column;
                gap: 0.5rem;
            }
        }

        /* 添加新的样式 */
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
        }

        .project-select-container {
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <h1 class="page-title">
        <i class="bi bi-bar-chart-line"></i>
        参数敏感性分析
    </h1>

    <!-- 项目信息卡片 -->
    <div class="project-info-card">
        <div class="project-header">
            <h2 class="project-title">敏感性分析项目：{{ project.projectname }}</h2>
            <div class="project-actions">
                <button class="custom-btn-outline" onclick="window.location.href='{{ url_for('func.myprojects') }}'">
                    <i class="bi bi-arrow-left-circle"></i> 返回项目列表
                </button>
                <button class="custom-btn" id="entersa">
                    <i class="bi bi-save"></i> 进入敏感性分析
                </button>
            </div>
        </div>

        <!-- 基准项目信息 -->
        <div class="base-project-info">
            <h3 class="info-section-title">基准单站点项目信息</h3>
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="info-label">项目名称</div>
                    <div class="project-select-container">
                        <select class="form-select" id="projectSelect">
                            {% for project in singlesiteProjects %}
                            <option value="{{ project.id }}" {% if Benchmark.id == project.id %} selected {% endif %}>{{ project.projectname }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="info-label">树种</div>
                    <div class="info-value" id="treeSpecies"></div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="info-label">站点</div>
                    <div class="info-value" id="siteLocation"></div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="info-label">项目描述</div>
                    <div class="info-value" id="simulationPeriod">暂无项目描述</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 定义项目数据
        const projectData = {
            {% for project in singlesiteProjects %}
                '{{ project.id }}': {
                species: JSON.parse('{{ project.data_input | safe }}').Species,
                site: JSON.parse('{{ project.data_input | safe }}').Site
            },
            {% endfor %}
        };

        // 监听选择变化
        document.getElementById('projectSelect').addEventListener('change', function() {
          updateProjectInfo(this.value);
        });

        // 定义更新信息的函数
        function updateProjectInfo(selectedProject) {
          const data = projectData[selectedProject];
          // 更新显示的信息
          document.getElementById('treeSpecies').textContent = data.species;
          document.getElementById('siteLocation').textContent = data.site;
        }

        // 页面加载完成后，立即基于当前选中项更新信息
        document.addEventListener('DOMContentLoaded', function() {
          const projectSelect = document.getElementById('projectSelect');
          if (projectSelect && projectSelect.value) {
            updateProjectInfo(projectSelect.value);
          }
        });

        $(document).ready(function (){
            $("#entersa").click(function (){
                const BenchmarkId = $("#projectSelect").val();
                const ProjectId = '{{ project.id }}';
                window.location.href = '{{ url_for('sens.sa') }}' + `?benchmark_id=${BenchmarkId}&project_id=${ProjectId}`;
            });
        });
    </script>
</body>
</html>